<template>
	<view class="page custom-page">
		<custom-head gradient back title="礼品发放"></custom-head>
		<view class="giftSend">
			
			<view class="content_top">
				<view class="item1 flex a-center" @tap="giftShow = true">
					<view class="label">选择礼品</view>
					<view class="value flex a-center jlr">
						<view>{{ selectGift.name }}</view>
						<u-icon name="arrow-right" color="#91959B" size="26"></u-icon>
					</view>
				</view>
				
				<view class="item1 flex a-center">
					<view class="label">数量</view>
					<view class="value count">
						<input type="number" v-model="count">
					</view>
				</view>
				
				<view class="item1 flex a-center" @tap="userShow = true">
					<view class="label">发放对象</view>
					<view class="value flex a-center jlr">
						<view>{{ selectUser.name }}</view>
						<u-icon name="arrow-right" color="#91959B" size="26"></u-icon>
					</view>
				</view>
			</view>
			
			
			<!-- <view class="button submit">积分发放</view> -->
			<view class="button submit content_bottom" @click="submit">确定</view>
		</view>
		
		<u-popup v-model="giftShow" closeable mode="bottom">
			<view class="bao_content">
				<view class="bao_height">
					<view class="selectGiftBody flex wrap">
						<view class="item" v-for="(item, index) in giftList" :class="{'on':giftIndex==index}" @tap="giftIndex = index">
							<view class="tag">{{ item.stock }}</view>
							<view class="image"><image :src="item.avatar" mode="widthFix" /></view>
							<view class="text">
								<h4>{{ item.name }}</h4>
								<p>积分：2000</p>
							</view>
						</view>
					</view>
				</view>
				<view class="bao_btn">
					<view class="button submit" style="margin-top: 20rpx; border-radius: 10rpx; wid" @click="handleCloseGift">确定</view>
				</view>
			</view>
		</u-popup>

		<u-popup class="bao_popup" v-model="userShow" closeable mode="bottom">
			<view class="bao_content">
				<view class="bao_height">
					<view class="selectUserBody flex wrap">
						<view class="item" v-for="(item, index) in studentsList" :class="{'on':userIndex==index}" @tap="userIndex = index">
							<view class="touxiang"><image :src="item.avatar" mode="widthFix" /></view>
							<view class="jifen">{{ item.integration }}</view>
							<view class="username">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view class="bao_btn">
					<view class="button submit" style="margin-top: 20rpx; border-radius: 10rpx;" @click="handleCloseObj">确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getPresent, addPresentGiftSend } from '../../api/modules/present';
	export default {
		data() {
			return {
				giftIndex:0,
				userIndex:0,
				giftShow:false,//选择礼品
				userShow:false,//选择人物
				giftList: [], // 礼品
				selectGift: {  // 选中礼品
					name: '',
				},
				studentsList:  [], // 学生接口返回的数据
				selectUser: { // 选中某个对象
					name: '',
				},
				count: '', // 数量
				static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			};
		},
		mounted() {
			this.studentsList = this.glbSchool.students
			console.log('--98', this.glbSchool.students)
			this._getPresent({page_no:1, page_size:10000});
		},
		methods: {
			submit() { // 获取输入框数据的东西
				const form = {
					cnt: this.count,
					pid: this.selectGift?.id,
					to: this.selectUser?.id,
					sid: this.glbId,
				}
				console.log('确定 发送', form)
				this._addPresentGiftSend(form)
			},
			handleCloseGift(){  // 关闭礼物按钮
				this.giftShow = false
				console.log('---礼物按钮', this.giftList[this.giftIndex])
				this.selectGift = this.giftList[this.giftIndex]
			},
			handleCloseObj() { // 关闭对象按钮
				this.userShow = false
				console.log('对象按钮---', this.studentsList[this.userIndex])
				this.selectUser = this.studentsList[this.userIndex]
			},

			_addPresentGiftSend(data) {
				addPresentGiftSend(data).then((res) => {
					const { code } = res || {}
					if (code ===201) {
						this.$u.toast('礼品发放成功')
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},

			_getPresent(data) { // 获取礼品的接口
				getPresent(data).then((res) => {
					const { code, data } = res || {};
					if (code === 200) {
						this.giftList = data.list.filter(i => i.sid === this.glbId).map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`}))
					}
					console.log('res', res)
				})
			},
			
		}
	};
</script>

<style scoped lang="scss">
	page{height: 100%; background-color: #fff;}

	.bao_content {
		height: 680rpx;
		/* display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; */
		.bao_height {
			height: 580rpx;
			overflow: auto;
		}
		.bao_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 102rpx;
		}
	}
	
	.giftSend{
		display: flex;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 60rpx 35rpx;
		height: 100%;
	}
	.item1{margin-bottom: 30rpx;}
	.label{width: 160rpx; font-size: 30rpx; line-height: 80rpx;}
	.value{border: 1px solid #F0F0F0; flex: 1; height: 80rpx; padding: 0 20rpx;}
	.count{text-align: right;}
	.value input{text-align: right; width: 100%; height: 100%; }
	.button {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx;
		margin: 80rpx 0 40rpx 0;
		background-color: #2979FF;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		/* margin: auto; */
		margin-top: 50rpx;
		margin-bottom: 10rpx;
	}
	.selectGiftBody{
		width:100%; padding: 10rpx; padding-left: 0; padding-top: 50px;
		.item{width: 234rpx; height: 274rpx; position: relative; background: #F4F4F4; border: 1px solid #F4F4F4; border-radius: 10rpx; margin-left: 10rpx; margin-top: 10rpx; padding: 10rpx;}
		.item.on{border: 1px solid #2979FF; background-color: #EAF4FF;}
		.image{width: 150rpx; height: 150rpx; border-radius: 10px; overflow: hidden; margin:10rpx auto;}
		.text{font-size: 24rpx; color: #F84638; text-align: center;}
		.text h4{font-size: 28rpx; color: #303133;}
		.tag{width: 42rpx; font-size: 24rpx; text-align: center; line-height: 42rpx; color: #fff; position: absolute; right: -5rpx; top: -5rpx; background-color: #F84638; border-radius: 50%;}
	}
	.selectUserBody{
		width:100%; padding: 8rpx; padding-left: 6rpx; padding-top: 50px;
		.item{
			width: 180rpx;
			padding-bottom: 17rpx;
			background: #F4F4F4;
			border: 1px solid #F4F4F4;
			border-radius: 8rpx;
			margin-left: 4rpx;
			margin-bottom: 5rpx;
		}
		.item.on{border: 1px solid #2979FF; background-color: #EAF4FF;}
	}
	.touxiang{width: 120rpx; height: 120rpx; border-radius: 50%; overflow: hidden; margin: auto; margin-top: 17rpx;}
	.jifen{color: #F93534; font-size: 24rpx; text-align: center;}
	.username{text-align: center; font-size: 26rpx;}
</style>